修改配置-背景圖片

大部分的修改都在 _config.kira.yml 這個檔案裡面，而且裡面已經有寫註釋可以看著改

首先要改的就是宅宅的重點----圖片

因為我是舟P原本想放舟的圖片但看了官網裡面有曬出來的圖不多(大多都是發在社群動態而非官網)，所以改成9的圖片

#你的大頭貼，直接修改圖片網址就行
avatar: <圖片路徑或是網址>
#背景圖與文章默認圖，直接修改圖片網址就行
background:
    path: <圖片路徑或是網址>
    width: 1280
    height: 720

存檔後重新啟動一次網站，就會依照你的網址去更改圖片了

如果你的照片不是用連結而是在本機的話，先在source中新增一個images資料夾專門放照片

然後在path的地方直接寫路徑即可。

這邊我直接使用9在官網開放下載的桌布圖

但是文章的略縮圖與我放的圖片大小不同，9的LOGO會被裁到，重不見了

#到原圖的網頁查看圖片大小
img[Attributes Style] {
    width: 1669px;
    aspect-ratio: auto 1669 / 770;
    height: 770px;
    aspect-ratio: auto 1669 / 770;
}

因此我們使用自訂義樣式來修改文章略縮圖大小為1669:770

我們將原本註解的自訂義樣式註解給拿掉

# 自訂義樣式
customStyles:
     - style

source底下新增style.css這個檔案

#維持 1669:770 比例，但顯示整張圖
.kira-post-cover {
  width: 100% !important;
  max-width: 1669px;
  aspect-ratio: 1669 / 770 !important;
  overflow: hidden;
  margin: 0 auto;
  background: transparent;
}
.kira-post-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

#文章頁內文圖片：顯示整張圖、不超出版面
.post .kira-article img,
.kira-image img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

這樣就能顯示整張圖了